<template>
  <!-- 运输方式 -->
  <div>
    <el-row>
      <el-col :span="24">
        <el-popover
          v-if="readonly && checkedData && checkedData.length > 2"
          placement="top"
          title=""
          width="200"
          trigger="hover"
        >
          <ul>
            <li v-for="(it, i) in checkedData" :key="i">{{ it }}</li>
          </ul>
          <template slot="reference">
            <el-select
              :disabled="readonly"
              v-model="checkedData"
              multiple
              collapse-tags
              value-key="transportWayCode"
            >
              <el-option
                v-for="item in options"
                :key="item.transportWayCode"
                :label="item.transportWayCode + item.transportWayName"
                :value="item.transportWayCode + item.transportWayName"
              ></el-option>
            </el-select>
          </template>
        </el-popover>
        <el-select
          :placeholder="$t('请选择运输方式')"
          v-else
          v-model="checkedData"
          multiple
          :collapse-tags="checkedData && checkedData.length > 2"
          @change="changeData"
          value-key="transportWayCode"
        >
          <el-option
            v-for="item in options"
            :key="item.transportWayCode"
            :label="item.transportWayCode + item.transportWayName"
            :value="item.transportWayCode + item.transportWayName"
          ></el-option>
        </el-select>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import nonStandardService from '@/services/nonStandardService'
import eventBus from '@/assets/utils/eventBus.js'
export default {
  name: 'transportModes',
  props: {
    detail: {
      type: Object,
      default: () => {
        return {}
      },
    },
    value: [Object, String],
    disabled: Boolean,
    parameter: {
      type: Object,
      default: () => {
        return {}
      },
    },
    data: {
      type: Object,
      default: () => {},
    },
    type: Number,
  },
  data() {
    return {
      options: [],
      checkedData: [],
      warehouseId: null,
      serviceTypeCode: null,
      readonly: false,
    }
  },
  created() {
    this.readonly = Boolean(this.$route.query.readonly)
    if (this.value) {
      this.setData()
    }
    eventBus.$on('serviceTypeChange', (val) => {
      this.$nextTick(() => {
        this.queryData(val)
      })
    })
    if (this.data.serviceType && this.type == 1) {
      this.queryData(this.data.serviceType)
    }
  },
  methods: {
    queryData(val) {
      nonStandardService
        .queryTransportWayList({
          financeEvent: val,
          tenantId: localStorage.getItem('tenantId'),
        })
        .then((res) => {
          if (res.code == 200) {
            this.options = res.data.transportWayList || []
          }
        })
    },
    setData() {
      let serviceType =
        this.data.serviceType.indexOf('{') === 0
          ? JSON.parse(this.data.serviceType)
          : {}
      this.queryData(serviceType.checkedData)
      this.checkedData = JSON.parse(this.value).checkedData
    },
    changeData(val) {
      if (val && val.length) {
        this.$emit('input', JSON.stringify(this.checkedData))
      } else {
        this.$emit('input', '')
      }
    },
    getData() {
      return {
        value: this.checkedData && this.checkedData.join(','),
        checkedData: this.checkedData,
      }
    },
  },
}
</script>
